<%@page contentType="text/html; charset=UTF-8" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">

<link href="/static/jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<link href="/static/jquery/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css" type="text/css" rel="stylesheet" />

<script type="text/javascript" src="/static/jquery/jquery-1.11.1-min.js"></script>
<script type="text/javascript" src="/static/jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/static/jquery/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript" src="/static/jquery/bootstrap-datetimepicker-master/locale/bootstrap-datetimepicker.zh-CN.js"></script>
	<%--日期插件--%>
	<%--注意css用link--%>
	<link href="/static/jquery/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css" type="text/css" rel="stylesheet" />
	<script type="text/javascript" src="/static/jquery/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js"></script>
	<script type="text/javascript" src="/static/jquery/bootstrap-datetimepicker/locale/bootstrap-datetimepicker.zh-CN.js"></script>

<script type="text/javascript">

	/*$(function(){
		
		//以下日历插件在FF中存在兼容问题，在IE浏览器中可以正常使用。
		/!*
		$("#startTime").datetimepicker({
			minView: "month",
			language:  'zh-CN',
			format: 'yyyy-mm-dd',
	        autoclose: true,
	        todayBtn: true,
	        pickerPosition: "bottom-left"
		});
		
		$("#endTime").datetimepicker({
			minView: "month",
			language:  'zh-CN',
			format: 'yyyy-mm-dd',
	        autoclose: true,
	        todayBtn: true,
	        pickerPosition: "bottom-left"
		});
		*!/
		
		//定制字段
		$("#definedColumns > li").click(function(e) {
			//防止下拉菜单消失
	        e.stopPropagation();
	    });
		
	});*/
	jQuery(function ($) {

		//页面加载：
		function  loadActivity(){
			$.ajax({
				url:"/activity/queryByCondition",
				data:{
					name:$("#queryName").val(),
					owner:$("#owner").val(),
					startDate:$("#startDate").val(),
					endDate:$("#endDate").val()
				},
				success(data){
					var arr=[];
						$(data).each(function (index) {
							arr.push(`<tr class="`+(index%2==0?'active':'')+`">
							<td><input name="actChk" type="checkbox" value="`+this.id+`" /></td>
							<td><a sxt=`+(this.id||'')+` id="aname" style="text-decoration: none; cursor: pointer;">`+this.name+`</a></td>
                            <td>`+(this.owner||'')+`</td>
							<td>`+(this.startDate||'')+`</td>
							<td>`+(this.endDate||'')+`</td>
							</tr>`);

						})
					$("#activityTbody").html(arr.join(""));
				}
			})
		}
		//动态刷新页面：
		loadActivity();

		//页面头部查询功能：该功能与页面查询功能 合并为一个功能：
		//分析：
		/* select * from tbl_marketing_activities
        <where>如果我们不传值，则where就无法成功：那么就是查询全部：select * from tbl_marketing_activities
        		如果传值查询，那么data的值就不为空，那么where标签就有效了，就自动加where条件了
            <if test="name!=null and name!=''">
                and name like '%' <%--#{name}--%> '%'
            </if>
            <if test="owner!=null and owner!=''">
                and owner like '%' <%--#{owner}--%> '%'
            </if>
            <if test="startDate!=null and startDate!=''">
                and startDate=<%--#{startDate}--%>
            </if>
            <if test="endDate!=null and endDate!=''">
                and endDate=<%--#{endDate}--%>
            </if>
        </where>*/
		$("#queryBtn").click(function () {
			loadActivity();
		});//就是点击事件发生后，调用function,funtion为loadA....

		//添加功能的拥有者下拉框的展示：做项目的时候：要贯通一遍：这样才能知晓哪些功能的重复需要的：
		//因为编辑功能也需要拥有者下拉框的展示：所以我们可以封装为方法，到时候直接调用就好了
		//市场活动所有者可以是当前登录的用户，
		// 不过当前登录的用户也可以指派其它用户为该市场活动的所有者
		function  loadOption(){//加载下拉框
		 	$.ajax({
				url: "/user/listOwner.json",
				success(data){
					$(data).each(function (i) {
						$("<option>"+this+"</option>").appendTo("select[name=selectAll]")
					});

				}
			})
		 }
		loadOption();//获取复选框
		 //点击创建按键
		 $("#creatActBtn").click(function () {
			 //打开创建的模态窗口
			 $("#createActivityModal").modal("show");
		 });

		//点检创建模块的保存功能
		$("#addActBtn").click(function () {
			/*主键采用uuid自动生成策略，要求32位长度，全部小写
     			保存市场活动的时候，将当前登录的用户作为市场活动创建者
					19个长度，精确到时分秒，例如：2010-10-10 10:10:10
					修改市场活动的时候，将当前登录的用户作为该市场活动的修改者
				19个长度，精确到时分秒，例如：2010-10-10 10:10:10
*/
			$.ajax({
				url:"/activity/addActivity.do",
				data:{
					owner:$(":input[id=create-marketActivityOwner]").val(),/*下拉选的值*/
					name:$("#create-marketActivityName").val(),
					startDate:$("#create-startTime").val(),
					endDate:$("#create-endTime").val(),
					cost:$("#create-cost").val(),
					description:$("#create-description").val(),

					/*获取如下属性：*/
					/*由谁创建的：获取的就是当前操作的用户，就是当前session中的用户名+账户名
					* 格式要求：账号|账户名
					* 后台处理一下属性：
					* */
					/*createBy:$("#createBy").val(),
					createTime:$("#createTime").val()*/
				},
				success(data){
					if(data.success){
						//页面跳转
						loadActivity();
						//把打开的模态窗口关闭
						$("div.modal:visible").modal("hide");
					}
					if(data.msg){
						alert(data.msg)
					}
				}
			})

		})


		//时间插件：
		$("input[name=startDate]").datetimepicker({
			language: "zh-CN",
			format: "yyyy-mm-dd",//显示格式
			minView: "month", // 日期时间选择器所能够提供的最精确的时间选择视图。
			initialDate: new Date(),//初始化当前日期
			autoclose: true, //选中自动关闭
			pickerPosition: "bottom-right"
		}).attr("autocomplete", "off");
		$("input[id=endDate]").datetimepicker({
			language: "zh-CN",
			format: "yyyy-mm-dd",//显示格式
			minView: "month", // 日期时间选择器所能够提供的最精确的时间选择视图。
			initialDate: new Date(),//初始化当前日期
			autoclose: true, //选中自动关闭
			pickerPosition: "bottom-right"
		}).attr("autocomplete", "off");
		$("input[id=create-startTime]").datetimepicker({
			language: "zh-CN",
			format: "yyyy-mm-dd",//显示格式
			minView: "month", // 日期时间选择器所能够提供的最精确的时间选择视图。
			initialDate: new Date(),//初始化当前日期
			autoclose: true, //选中自动关闭
			pickerPosition: "bottom-right"
		}).attr("autocomplete", "off");
		$("input[id=create-endTime]").datetimepicker({
			language: "zh-CN",
			format: "yyyy-mm-dd",//显示格式
			minView: "month", // 日期时间选择器所能够提供的最精确的时间选择视图。
			initialDate: new Date(),//初始化当前日期
			autoclose: true, //选中自动关闭
			pickerPosition: "bottom-right"
		}).attr("autocomplete", "off");
		$("input[id=edit-startTime]").datetimepicker({
			language: "zh-CN",
			format: "yyyy-mm-dd",//显示格式
			minView: "month", // 日期时间选择器所能够提供的最精确的时间选择视图。
			initialDate: new Date(),//初始化当前日期
			autoclose: true, //选中自动关闭
			pickerPosition: "bottom-right"
		}).attr("autocomplete", "off");
		$("input[id=edit-endTime]").datetimepicker({
			language: "zh-CN",
			format: "yyyy-mm-dd",//显示格式
			minView: "month", // 日期时间选择器所能够提供的最精确的时间选择视图。
			initialDate: new Date(),//初始化当前日期
			autoclose: true, //选中自动关闭
			pickerPosition: "bottom-right"
		}).attr("autocomplete", "off");


		//全选按钮与多选框点击有效时间委派实现
		$("#checkALL").click(function () {
			$(":checkbox[name=actChk]").prop("checked",this.checked)
		});
		$("#activityTbody").on("click","input[name=actChk]",function () {
			$("#checkALL").prop("checked",$(":checkbox[name=actChk]").size()==$(":checkbox[name=actChk]:checked").size())
		})
		//编辑功能：数据回显
		$("#editActBtn").click(function () {

			//获取被选中的多选框:限制只能选择一项：记得不要加val()，此时是获取所有被选中的复选框
			var chkVal = $(":checkbox[name=actChk]:checked");
			if(chkVal.length !== 1){
				alert("请选择一项编辑项！")
				return;
			}
			//打开编辑模态窗口
			$("#editActivityModal").modal("show");
			//数据回显
			$.ajax({
				url:"/activity/getEditData.json?id="+chkVal.val(),//此时需要调用val()获取被选中多选框的value值
				success(data){
					//将返回的数据赋值给编辑模块
					$("#edit-marketActivityName").val(data.name);
					$("#edit-startTime").val(data.startDate);
					$("#edit-endTime").val(data.endDate);
					$("#edit-cost").val(data.cost);
					$("#edit-description").val(data.description);
					$("#editId").val(data.id)
				}
			})
		});

		//编辑功能：数据提交
		$("#editActivityBtn").click(function () {
			console.log($(":input[id=edit-marketActivityOwner]").val());
			$.ajax({
				url:"/activity/editAct.do",
				data:{
					id:$("#editId").val(),
					owner:$(":input[id=edit-marketActivityOwner]").val(),
					name:$("#edit-marketActivityName").val(),
					startDate:$("#edit-startTime").val(),
					endDate:$("#edit-endTime").val(),
					cost:$("#edit-cost").val(),
					description:$("#edit-description").val(),
					//后端获取
					/*editBy:$("#edit-editBy"),
					editTime:$("#edit-editTime"),
*/
				},
				success(data){
					if(data.success){
						loadActivity();
						//关闭打开了的模态窗口
						$("div.modal:visible").modal("hide")
					}
					if(data.msg){
						alert(data.msg)
					}
				}
			})
		})


		//删除功能：
		$("#delActBtn").click(function () {
			var ids = $(":checkbox[name=actChk]:checked").map(function (value) {
				return this.value;
			}).get().join(",");
			if(ids.length ==0){
				alert("请选择删除项");
				return;
			}

			$.ajax({
				url:"/activity/delActivity.do?ids="+ids,
				success(data){
					if(data.success){
						loadActivity();
						$("#checkALL").prop("checked",false)
					}
					if(data.msg){
						alert(data.msg)
					}
				}
			})
		});

		//将内容导出成为execl功能:其实就是下载功能:该功能全在后端实现
		$("#exportBtn").click(function () {
			location ="/activity/export.do";
		})


		//导入功能
		$("#importBtn").click(function () {//导入按钮点击事件
			//获取上传的文件，是一个数组:获取前，记得给上传文件的标签name赋值upFile，后台通过upFile获取：完整表单提交的时候
			var files= $("#upFile").prop("files");
			//因为是只能上传一个文件，所以我们通过下标直接获取file[0]：ajxa上传时使用
			var formData = new FormData();
			formData.append("upFile",files[0]);//后端通过upFile获取文件

			$.ajax({
				url:"/activity/import.do",
				type:"post",//上传文件必须为post
				data:formData,//将该对象以数据形式传入后端
				contentType:false, // 禁止jQuery对数据进行任何修改
				processData:false, // 禁止jQuery对数据进行任何修改
				success(data){
					if(data.success){
						loadActivity();
						$("div.modal:visible").hide()
					}
					if(data.msg){
						alert(data.msg)
					}
				}
			})

		});



		//名称展示细节: 注意：此处页面跳转 ，携带数据：涉及ajax获取页面跳转携带数据的技术
		$("#activityTbody").on("click","a[id=aname]",function () {
			location="/workbench/activity/detail.html?id="+$(this).attr("sxt")
		})


			})
	
</script>
</head>
<body>

	<!-- 创建市场活动的模态窗口 -->
	<div class="modal fade" id="createActivityModal" role="dialog">
		<div class="modal-dialog" role="document" style="width: 85%;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">×</span>
					</button>
					<h4 class="modal-title" id="myModalLabel1">创建市场活动</h4>
				</div>
				<div class="modal-body">
				
					<form class="form-horizontal" role="form">
					
						<div class="form-group">
							<label for="create-marketActivityOwner" class="col-sm-2 control-label">所有者<span style="font-size: 15px; color: red;">*</span></label>
							<div class="col-sm-10" style="width: 300px;">
								<select name="selectAll" class="form-control" id="create-marketActivityOwner">

								</select>
							</div>
                            <label for="create-marketActivityName" class="col-sm-2 control-label">名称<span style="font-size: 15px; color: red;">*</span></label>
                            <div class="col-sm-10" style="width: 300px;">
                                <input  type="text" class="form-control" id="create-marketActivityName">
                            </div>
						</div>
						
						<div class="form-group">
							<label for="create-startTime" class="col-sm-2 control-label">开始日期</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="create-startTime">
							</div>
							<label for="create-endTime" class="col-sm-2 control-label">结束日期</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="create-endTime">
							</div>
						</div>
                        <div class="form-group">

                            <label for="create-cost" class="col-sm-2 control-label">成本</label>
                            <div class="col-sm-10" style="width: 300px;">
                                <input type="text" class="form-control" id="create-cost">
                            </div>
                        </div>
						<div class="form-group">
							<label for="create-describe" class="col-sm-2 control-label">描述</label>
							<div class="col-sm-10" style="width: 81%;">
								<textarea class="form-control" rows="3" id="create-description"></textarea>
							</div>
						</div>
						
					</form>
					
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button id="addActBtn" type="button" class="btn btn-primary">保存</button>
				</div>
			</div>
		</div>
	</div>
	
	<!-- 修改市场活动的模态窗口 -->
	<div class="modal fade" id="editActivityModal" role="dialog">
		<div class="modal-dialog" role="document" style="width: 85%;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">×</span>
					</button>
					<h4 class="modal-title" id="myModalLabel2">修改市场活动</h4>
				</div>
				<div class="modal-body">
				
					<form class="form-horizontal" role="form">
						<input id="editId" type="hidden" value="">
						<div class="form-group">
							<label for="edit-marketActivityOwner" class="col-sm-2 control-label">所有者<span style="font-size: 15px; color: red;">*</span></label>
							<div class="col-sm-10" style="width: 300px;">
								<select name="selectAll" class="form-control" id="edit-marketActivityOwner">

								</select>
							</div>
                            <label for="edit-marketActivityName" class="col-sm-2 control-label">名称<span style="font-size: 15px; color: red;">*</span></label>
                            <div class="col-sm-10" style="width: 300px;">
                                <input type="text" class="form-control" id="edit-marketActivityName" value="">
                            </div>
						</div>

						<div class="form-group">
							<label for="edit-startTime" class="col-sm-2 control-label">开始日期</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="edit-startTime" value="">
							</div>
							<label for="edit-endTime" class="col-sm-2 control-label">结束日期</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="edit-endTime" value="">
							</div>
						</div>
						
						<div class="form-group">
							<label for="edit-cost" class="col-sm-2 control-label">成本</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="edit-cost" value="">
							</div>
						</div>
						
						<div class="form-group">
							<label for="edit-describe" class="col-sm-2 control-label">描述</label>
							<div class="col-sm-10" style="width: 81%;">
								<textarea class="form-control" rows="3" id="edit-description"></textarea>
							</div>
						</div>
						
					</form>
					
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button id="editActivityBtn" type="button" class="btn btn-primary" >更新</button>
				</div>
			</div>
		</div>
	</div>
	
	
	<!-- 导入市场活动的模态窗口 -->
	<div class="modal fade" id="importActivityModal" role="dialog">
		<div class="modal-dialog" role="document" style="width: 85%;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">×</span>
					</button>
					<h4 class="modal-title" id="myModalLabel">导入市场活动</h4>
				</div>
				<div class="modal-body" style="height: 350px;">
					<div style="position: relative;top: 20px; left: 50px;">
						请选择要上传的文件：<small style="color: gray;">[仅支持.xls或.xlsx格式]</small>
					</div>
					<div style="position: relative;top: 40px; left: 50px;">
						<input id="upFile"  type="file" multiple accept="application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet">
					</div>
					<div style="position: relative; width: 400px; height: 320px; left: 45% ; top: -40px;" >
						<h3>重要提示</h3>
						<ul>
							<li>给定文件的第一行将视为字段名。</li>
							<li>请确认您的文件大小不超过5MB。</li>
							<li>从XLS/XLSX文件中导入全部重复记录之前都会被忽略。</li>
							<li>复选框值应该是1或者0。</li>
							<li>日期值必须为MM/dd/yyyy格式。任何其它格式的日期都将被忽略。</li>
							<li>日期时间必须符合MM/dd/yyyy hh:mm:ss的格式，其它格式的日期时间将被忽略。</li>
							<li>默认情况下，字符编码是UTF-8 (统一码)，请确保您导入的文件使用的是正确的字符编码方式。</li>
							<li>建议您在导入真实数据之前用测试文件测试文件导入功能。</li>
						</ul>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button id="importBtn" type="button" class="btn btn-primary">导入</button>
				</div>
			</div>
		</div>
	</div>
	
	<div>
		<div style="position: relative; left: 10px; top: -10px;">
			<div class="page-header">
				<h3>市场活动列表</h3>
			</div>
		</div>
	</div>
	<div style="position: relative; top: -20px; left: 0px; width: 100%; height: 100%;">
		<div style="width: 100%; position: absolute;top: 5px; left: 10px;">
		
			<div class="btn-toolbar" role="toolbar" style="height: 80px;">
				<form class="form-inline" role="form" style="position: relative;top: 8%; left: 5px;">
				  
				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">名称</div>
				      <input id="queryName" class="form-control" type="text">
				    </div>
				  </div>
				  
				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">所有者</div>
				      <input id="owner" class="form-control" type="text">
				    </div>
				  </div>


				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">开始日期</div>
					  <input name="startDate" class="form-control" type="text" id="startDate" />
				    </div>
				  </div>
				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">结束日期</div>
					  <input  class="form-control" type="text" id="endDate">
				    </div>
				  </div>
				  
				  <button id="queryBtn" type="button" class="btn btn-default">查询</button>
				  
				</form>
			</div>
			<div class="btn-toolbar" role="toolbar" style="background-color: #F7F7F7; height: 50px; position: relative;top: 5px;">
				<div class="btn-group" style="position: relative; top: 18%;">
				  <button id="creatActBtn" type="button" class="btn btn-primary"  data-target="#createActivityModal"><span class="glyphicon glyphicon-plus"></span> 创建</button>
				  <button id="editActBtn" type="button" class="btn btn-default"  data-target="#editActivityModal"><span class="glyphicon glyphicon-pencil"></span> 修改</button>
				  <button id="delActBtn" type="button" class="btn btn-danger"><span class="glyphicon glyphicon-minus"></span> 删除</button>
				</div>
				<div class="btn-group" style="position: relative; top: 18%;">
				  <button  type="button" class="btn btn-default" data-toggle="modal" data-target="#importActivityModal"><span class="glyphicon glyphicon-import"></span> 导入</button>
				  <button id="exportBtn" type="button" class="btn btn-default"><span class="glyphicon glyphicon-export"></span> 导出</button>
				</div>
			</div>
			<div style="position: relative;top: 10px;">
				<table class="table table-hover">
					<thead>
						<tr style="color: #B3B3B3;">
							<td><input id="checkALL" type="checkbox" /></td>
							<td>名称</td>
                            <td>所有者</td>
							<td>开始日期</td>
							<td>结束日期</td>
						</tr>
					</thead>
					<tbody id="activityTbody">


					</tbody>
				</table>
			</div>
			
			<div style="height: 50px; position: relative;top: 30px;">
				<div>
					<button type="button" class="btn btn-default" style="cursor: default;">共<b>50</b>条记录</button>
				</div>
				<div class="btn-group" style="position: relative;top: -34px; left: 110px;">
					<button type="button" class="btn btn-default" style="cursor: default;">显示</button>
					<div class="btn-group">
						<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
							10
							<span class="caret"></span>
						</button>
						<ul class="dropdown-menu" role="menu">
							<li><a href="#">20</a></li>
							<li><a href="#">30</a></li>
						</ul>
					</div>
					<button type="button" class="btn btn-default" style="cursor: default;">条/页</button>
				</div>
				<div style="position: relative;top: -88px; left: 285px;">
					<nav>
						<ul class="pagination">
							<li class="disabled"><a href="#">首页</a></li>
							<li class="disabled"><a href="#">上一页</a></li>
							<li class="active"><a href="#">1</a></li>
							<li><a href="#">2</a></li>
							<li><a href="#">3</a></li>
							<li><a href="#">4</a></li>
							<li><a href="#">5</a></li>
							<li><a href="#">下一页</a></li>
							<li class="disabled"><a href="#">末页</a></li>
						</ul>
					</nav>
				</div>
			</div>
			
		</div>
		
	</div>
</body>
</html>